import { Callout, Sandpack } from '@/components'

# Delay

이 컴포넌트는 두 가지 방식으로 사용할 수 있습니다.

1. children에 delay를 적용하여 노출 시점을 지연시키거나,
2. children이 render prop일 경우 delay된 시점에 플래그를 전달합니다.

### props.ms

#### 1. children이 노출되는 시점을 지연

이 컴포넌트는 children이 노출되는 시점을 ms만큼 지연시킵니다. 아래와 같은 코드에서는 200ms만큼 children 노출이 지연됩니다.

```tsx /ms/
import { Delay } from '@suspensive/react'

export const Example = () => {
  return (
    <Delay ms={200}>
      <Delayed />
    </Delay>
  )
}
```

<Sandpack>

```tsx Example.tsx active
import { Delay } from '@suspensive/react'

export const Example = () => (
  <Delay ms={1000}>
    <div style={{ padding: 20, backgroundColor: 'lightblue' }}>
      1s delayed Text
    </div>
  </Delay>
)
```

</Sandpack>

#### 2. children에 지연된 플래그를 전달하기

children이 render prop이라면 노출을 제어하지 않고 플래그를 전달합니다. 아래와 같은 코드에서는 200ms 뒤에 `isDelayed`가 true로 전달됩니다.

```tsx /ms/
import { Delay } from '@suspensive/react'

export const Example = () => {
  return (
    <Delay ms={200}>
      {({ isDelayed }) => (
        <div
          style={{
            opacity: isDelayed ? 1 : 0,
            transition: 'opacity 1500ms',
          }}
        ></div>
      )}
    </Delay>
  )
}
```

<Sandpack>

```tsx Example.tsx active
import { Delay } from '@suspensive/react'

export const Example = () => (
  <div style={{ backgroundColor: 'lightblue' }}>
    <Delay ms={1500}>
      {({ isDelayed }) => (
        <div
          style={{
            opacity: isDelayed ? 1 : 0,
            transition: 'opacity 1500ms',
          }}
        >
          1500ms opacity trigger
        </div>
      )}
    </Delay>
  </div>
)
```

</Sandpack>

<Callout type='info'>

로딩 UI가 지연되어 노출되는 것이 때에 따라 더 좋은 사용성을 제공합니다.

```jsx /Delay/
import { Delay, Suspense } from '@suspensive/react'

const Example = () => (
  <Suspense
    fallback={
      <Delay ms={200}>
        <Skeleton />
      </Delay>
    }
  >
    ...
  </Suspense>
)
```

</Callout>

<Callout>

Default ms

`<Delay/>`는 `<DefaultPropsProvider/>`와 함께 사용할 때 더욱 강력해집니다. `<DefaultPropsProvider/>`를 사용하여 여러 `<Delay/>` default ms를 제어합니다. 자세한 내용은 [`<DefaultPropsProvider/>` 페이지](/docs/react/DefaultPropsProvider)에 소개되어 있습니다.

</Callout>

### props.fallback

delay된 children 노출 전까지 보여줄 수 있는 fallback입니다.

```jsx /fallback/
import { Delay } from '@suspensive/react'

const Example = () => (
  <Delay ms={200} fallback={<>Fallback Text</>}>
    200ms delayed Text
  </Delay>
)
```

<Sandpack>

```tsx Example.tsx active
import { Delay } from '@suspensive/react'

export const Example = () => {
  return (
    <div style={{ padding: 20, backgroundColor: 'lightblue' }}>
      <Delay ms={1000} fallback={<>Fallback Text</>}>
        1s delayed Text
      </Delay>
    </div>
  )
}
```

</Sandpack>

## Delay.with

`Delay.with`는 `Delay`를 사용하여 컴포넌트를 래핑하는 HOC입니다.
`Delay.with`를 사용하면 컴포넌트를 쉽게 래핑할 수 있습니다.

```tsx /Delay.with/
import { Delay } from '@suspensive/react'

const Example = Delay.with({ ms: 2000 }, () => {
  return <>...</>
})
```
